import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import { Card, Form, Tree, Layout, Menu, Dropdown, Button, Icon, message, Divider, Input, Row, Col, Select, Tooltip, Modal   } from 'antd';
import BMap from 'BMap';
import BMapLib from 'BMapLib';
import '@/utils/LuShu';
import '@/utils/DistanceTool_min';
// import '@/utils/TrafficControl_min';
import carImg from '@/assets/car.png';
import coordtransform from 'coordtransform';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import DatePickerTime from '@/components/DatePickerTime';
import styles from "./TrafficControl_min.less";
const tree_icon = {
    all: require("@/assets/org_all.png"),
    company: require("@/assets/org_company.png"),
    team: require("@/assets/org_team.gif"),
    online: require("@/assets/org_online.png"),
    offline: require("@/assets/org_offline.png"),
    direction: require("@/assets/direction_r.png"),
}
const {
    Sider, Content,
} = Layout;
const Search = Input.Search;
const { TreeNode } = Tree;

@connect(({ loading, vehicle, menuTree }) => ({
    vehicle,
    loading: loading.models.vehicle,
    menuTree: menuTree.menuData,
}))
@Form.create()
class TableList extends PureComponent {
    state = {
        map:null,
        myDis:null,
        treeData1:[
            {
                cls_name:"常州分公司",
                cls_id:"0-0",
                disabled:false,
                children:[
                    {
                        cls_name: "0-0-1",
                        cls_id: "0-0-1",
                        disabled: false,
                    },
                    {
                        cls_name: "0-0-2",
                        cls_id: "0-0-2",
                        disabled: false,
                    },
                    {
                        cls_name: "0-0-3",
                        cls_id: "0-0-3",
                        disabled: false,
                    },
                    {
                        cls_name: "0-0-4",
                        cls_id: "0-0-4",
                        disabled: false,
                    },
                ]
            },
            {
                cls_name:"苏州分公司",
                cls_id:"0-1",
                disabled:false,
                children:[
                    {
                        cls_name: "0-1-1",
                        cls_id: "0-1-1",
                        disabled: false,
                    },
                    {
                        cls_name: "0-1-2",
                        cls_id: "0-1-2",
                        disabled: false,
                    },
                    {
                        cls_name: "0-1-3",
                        cls_id: "0-1-3",
                        disabled: false,
                    },
                    {
                        cls_name: "0-1-4",
                        cls_id: "0-1-4",
                        disabled: false,
                    },
                ]
            },
            {
                cls_name:"无锡分公司",
                cls_id:"0-2",
                disabled:false,
                children:[
                    {
                        cls_name: "0-2-0",
                        cls_id: "0-2-0",
                        disabled: false,
                    },
                    {
                        cls_name: "0-2-1",
                        cls_id: "0-2-1",
                        disabled: false,
                    },
                    {
                        cls_name: "0-2-2",
                        cls_id: "0-2-2",
                        disabled: false,
                    },
                    {
                        cls_name: "0-2-3",
                        cls_id: "0-2-3",
                        disabled: false,
                    },
                ]
            },
            {
                cls_name:"南京分公司",
                cls_id:"0-3",
                disabled:false,
                children:[
                    {
                        cls_name: "0-3-0",
                        cls_id: "0-3-0",
                        disabled: false,
                    },
                    {
                        cls_name: "0-3-1",
                        cls_id: "0-3-1",
                        disabled: false,
                    },
                    {
                        cls_name: "0-3-2",
                        cls_id: "0-3-2",
                        disabled: false,
                    },
                    {
                        cls_name: "0-3-3",
                        cls_id: "0-3-3",
                        disabled: false,
                    },
                ]
            },
            {
                cls_name:"南通分公司",
                cls_id:"0-4",
                disabled:false,
                children:[
                    {
                        cls_name: "0-4-1",
                        cls_id: "0-4-1",
                        disabled: false,
                    },
                    {
                        cls_name: "0-4-2",
                        cls_id: "0-4-2",
                        disabled: false,
                    },
                    {
                        cls_name: "0-4-3",
                        cls_id: "0-4-3",
                        disabled: false,
                    },
                    {
                        cls_name: "0-4-4",
                        cls_id: "0-4-4",
                        disabled: false,
                    },
                ]
            },
        ],
        treeData:[],
        verticalArray:{},
        // 
        loopDataLocal: [], //当前回放的定位详情
        loopData: [], //轨迹定位详情数组
        loopPath: [], //轨迹点数组
        localNo: 0,//当前的点
        lushu: {},
        toggleIcon:false,
        toggleInput:false,
        inputValue:{},
        lushuStatus:null,//1=播放中，2=已暂停，3=已停止
        drawerVisible:false
    };

    componentWillReceiveProps(){
        this.lushuPause()
    }
    componentDidMount() {
        const {
            dispatch,
            location: { pathname },
            menuTree,
        } = this.props;
        dispatch({
            type: "vehicle/fetchQueryOrgMenuList",
            payload: {
                menuId: 0
            },
            callback: (res) => {
                if (res.code !== "000000") { 
                    if (res.code == '999902') {
                        Modal.warning({
                            title: res.msg,
                            content: 'Please log back in when the session has timed out...',
                            okText: '重新登录',
                            onOk() {
                                dispatch({
                                    type: 'login/logout',
                                });
                            },
                        });
                        return;
                    }
                }
                this.setState({
                    treeData: res.orgMenuList
                })
            }
        })

        // const access = getAccess(pathname, menuTree);
        // this.setState({
        //     access: access.childRoutes || {},
        // });
        this.defaultMap()
    }
    // 路径查询--默认--渲染地图
    defaultMap = () => {
        var ismap = setInterval(() => {
            if (document.getElementById('Bmap_cctv')) {
                clearInterval(ismap);
                // 创建地图控件
                var map = new BMap.Map('Bmap_cctv', { enableMapClick: false }); // 创建Map实例
                map.centerAndZoom(new BMap.Point(116.404, 39.915),6); // 初始化地图,设置中心点坐标和地图级别
                map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
                var myDis = new BMapLibDistance.DistanceTool(map);//初始化测距
                map.addControl(new BMap.MapTypeControl({
                    mapTypes: [
                        BMAP_NORMAL_MAP,
                        BMAP_HYBRID_MAP
                    ]
                }));
                
                // 添加交通流量控件
                var ctrl = new BMapLib.TrafficControl({
                    showPanel: true //是否显示路况提示面板
                });
                map.addControl(ctrl);
                ctrl.setAnchor(BMAP_ANCHOR_BOTTOM_RIGHT);  
                this.setState({
                    map,
                    myDis
                })
            } else {
                console.log('map');
            }
        }, 300);
    };
    // 显示车辆点集合
    showPoints = (points,flag) => {
        const {map} = this.state
        if (map && Object.keys(map).length){
            if (!Object.keys(points).length) { map.clearOverlays();  return}
            // 删除指定点
            if(flag == false){
                this.removeMapMarker(points)
                return
            }
            // 转换所有坐标点  
            const pointArry = []
            const infoArry = []
            for (const key in points) {
                if (points.hasOwnProperty(key)) {
                    const location = points[key].locationEntity;
                    var wgs84togcj02 = coordtransform.wgs84togcj02(location.lng, location.lat);
                    var gcj02tobd09 = coordtransform.gcj02tobd09(wgs84togcj02[0], wgs84togcj02[1]);
                    var pointBD = new BMap.Point(gcj02tobd09[0], gcj02tobd09[1]);
                    pointArry.push(pointBD)
                    infoArry.push(points[key])
                }
            }    
            // 编写自定义函数,创建标注
            var geoc = new BMap.Geocoder();
            var myIcon = new BMap.Icon(carImg, new BMap.Size(26, 26));
            function addMarker(point,info) {
                var marker = new BMap.Marker(point, { icon: myIcon });
                marker.imei = info.iccid
                map.addOverlay(marker);
                // 气泡 // 添加窗口信息
                var opts = {
                    width: 250,
                };
                var infoWindow = null;
                geoc.getLocation(point, function (rs) {
                    var addComp = rs.addressComponents;
                    var address = `${addComp.province}${addComp.city}${addComp.district}${addComp.street}${addComp.streetNumber}`;        
                    var innerText = `
                        <div>编号：${info.iccid ? info.iccid : '未知'}</div>
                        <div>车牌号：${info.vehicleEntity ? info.vehicleEntity.plateNo : '未知'}</div>
                        <div>时间：${info.locationEntity ? info.locationEntity.rptutc : '未知'}</div>
                        <div>速度：${info.locationEntity.spd ? parseFloat(info.locationEntity.spd).toFixed(2) +"（km/h）" : '未知'}</div>
                        <div>状态：${info.vehicleEntity.online ? "在线" : '离线'}</div>
                        <div>位置：${address ? address : '未知'}</div>
                    `;
                    infoWindow = new BMap.InfoWindow(innerText, opts); // 创建信息窗口对象
                    if (pointArry.length == 1){
                        marker.openInfoWindow(infoWindow); //开启信息窗口
                    }
                }); 
                marker.addEventListener("click", function () {
                    map.openInfoWindow(infoWindow, point);
                });
            }
            for( var i=0; i<pointArry.length; i++){
                addMarker(pointArry[i], infoArry[i]);
            }
            if (pointArry.length == 1){
                map.centerAndZoom(pointArry[0], 11);
             return   
            }
            map.setViewport(pointArry)      
        }
    }
    // 删除指定覆盖物
    removeMapMarker = (points)=>{        
        const { map } = this.state
        var allOverlay = map.getOverlays();
        var delList = [];
        for (var i = 0; i < points.length; i++) {
            delList[i] = points[i].iccid
        }     
        for (var i = 0; i < allOverlay.length; i++) {
            if (delList.includes(allOverlay[i].imei)) {
                map.removeOverlay(allOverlay[i]);
            }
        }
    }
    /**
     * tree
     */
    onLoadData = treeNode => new Promise((resolve) => {
        const { dispatch } = this.props
        if (treeNode.props.children) {
            resolve();
            return;
        }
        dispatch({
            type: "vehicle/fetchQueryOrgMenuList",
            payload: {
                menuId: treeNode.props.dataRef.id
            },
            callback: (res) => {               
                if(res.code !== "000000"){message.warning(res.msg);return}
                if (res.vehicleListInfo.length){
                    var data = res.orgMenuList.concat(res.vehicleListInfo)
                    treeNode.props.dataRef.children = data
                    this.setState({
                        treeData: [...this.state.treeData],
                    });
                    resolve();
                    return
                } 
                treeNode.props.dataRef.children = res.orgMenuList
                this.setState({
                    treeData: [...this.state.treeData],
                });
                resolve();
            }
        })
    })
    onSelect = (selectedKeys, info) => {
        console.log('selected', selectedKeys, info);

        const flag = info.node.props.dataRef;
        if (!flag || flag.orgType !== 3){ return }
        const { map, verticalArray } = this.state;
        
        const imei = flag.imei;
        if (map && Object.keys(map).length) {
            var allOverlay = map.getOverlays();
            for (var i = 0; i < allOverlay.length; i++) {
                if (imei == allOverlay[i].imei) {
                    const info = verticalArray[imei]; 
                    const pop = allOverlay[i];
                    var opts = {
                        width: 250,
                    };
                    var infoWindow = null;
                    var wgs84togcj02 = coordtransform.wgs84togcj02(info.locationEntity.lng, info.locationEntity.lat);
                    var gcj02tobd09 = coordtransform.gcj02tobd09(wgs84togcj02[0], wgs84togcj02[1]);
                    var point = new BMap.Point(gcj02tobd09[0], gcj02tobd09[1]);
                    var geoc = new BMap.Geocoder();
                    geoc.getLocation(point, function (rs) {
                        var addComp = rs.addressComponents;
                        var address = `${addComp.province}${addComp.city}${addComp.district}${addComp.street}${addComp.streetNumber}`;
                        var innerText = `
                        <div>编号：${info.iccid ? info.iccid : '未知'}</div>
                        <div>车牌号：${info.vehicleEntity ? info.vehicleEntity.plateNo : '未知'}</div>
                        <div>时间：${info.locationEntity ? info.locationEntity.rptutc : '未知'}</div>
                        <div>速度：${info.locationEntity.spd ? parseFloat(info.locationEntity.spd).toFixed(2) + "（km/h）" : '未知'}</div>
                        <div>状态：${info.vehicleEntity.online ? "在线" : '离线'}</div>
                        <div>位置：${address ? address : '未知'}</div>
                    `;
                        infoWindow = new BMap.InfoWindow(innerText, opts); // 创建信息窗口对象
                        pop.openInfoWindow(infoWindow); //开启信息窗口
                    }); 
                }
            }
        }
    }
    onCheck = (checkedKeys, info) => {
        const {dispatch} = this.props
        const { verticalArray} = this.state
        console.log("当前点击的item：" , info.node.props.dataRef)
        // 如果存在 Lushu --则暂停
        this.lushuPause()
        var data = {
            orgId: info.node.props.dataRef ? info.node.props.dataRef.id:0,
            orgType: info.node.props.dataRef ? info.node.props.dataRef.orgType :1 
        }
        if (data.orgType == 3) { data.orgId = info.node.props.dataRef.imei}            
        dispatch({
            type: "vehicle/fetchQueryVehicleByTeam",
            payload: data,
            callback: (res) => {
                if (res.code !== "000000") { 
                    if (res.code == '999902') {
                        Modal.warning({
                            title: res.msg,
                            content: 'Please log back in when the session has timed out...',
                            okText: '重新登录',
                            onOk() {
                                dispatch({
                                    type: 'login/logout',
                                });
                            },
                        });
                        return;
                    }
                }
                if (info.checked){
                    const itemMap = {}
                    for (var i = 0; i < res.infoList.length; i++) {
                        itemMap[res.infoList[i].iccid] = res.infoList[i]
                    }
                    let obj = Object.assign({}, verticalArray, itemMap)
                    this.setState((prevState, props) => {
                        return { verticalArray: obj};
                    });

                    this.showPoints(itemMap, true)

                }else{
                    const itemMap = []
                    for (var i = 0; i < res.infoList.length; i++) {
                        itemMap[i] = res.infoList[i].iccid
                    }         
                    for (const key in verticalArray) {
                        if (verticalArray.hasOwnProperty(key)) {
                            if(itemMap.includes(verticalArray[key].iccid)){
                                delete verticalArray[key]
                            }                            
                        }
                    }
                    this.setState((prevState, props) => {
                        return { verticalArray: {...verticalArray} };
                    });

                    this.showPoints(res.infoList, false)
                }
            }
        })        
    }
    renderTreeNodes = data => data.map((item) => {
        if (item.children) {
            return (
                <TreeNode title={item.name} key={item.id} dataRef={item} icon={<img src={item.orgType == 1 ? tree_icon.company : tree_icon.team} />}>
                    {this.renderTreeNodes(item.children)}
                </TreeNode>
            );
        }
        if (Object.keys(item).length == 0) return
        const TreeNodeFn = (item)=>{
            switch (item.orgType) {
                case 1://公司
                    return <TreeNode title={item.name} key={item.id} dataRef={item}  icon={<img src={tree_icon.company} />} />
                    break;
                case 2://车队
                    return <TreeNode title={item.name} key={item.id} dataRef={item}  icon={<img src={tree_icon.team} />} />
                    break;
                case 3://车辆
                    return <TreeNode title={item.name} key={item.id} dataRef={item} isLeaf={true} icon={<img src={item.online ? tree_icon.online : tree_icon.offline } />} />
                    break;    
                default:
                    break;
            }
        }
        return TreeNodeFn(item)
    })
    // dropDown
    handleButtonClick=(e)=> {
        message.info('Click on left button.');
        console.log('click left button', e);
    }
    /**
     * 工具箱
     * key=1-->测距
     */
    handleMenuClick=(e)=> {
        const { myDis} = this.state
        switch (e.key) {
            case "1":
                myDis.open()
                break;
        
            default:
                break;
        }
    }
    rightClick = ({ event, node })=>{
        const { toggleInput} = this.state
        if (!toggleInput) return
        const type = node.props.dataRef
        if (!type || type.orgType !== 3) { message.warning("请右键选择车辆！！"); return}
        const data = {};
        data.plateNo = type.plateNo
        data.imei = type.imei
        this.setState({
            inputValue: data
        })
        message.success("选择成功！！")
    }
    /**
     * 轨迹回放 
     * handleSubmit--轨迹查询事件
     * mounthPoint--转化坐标->保存数据
     * createMap--轨迹播放准备
     * dataLoopFn--路书回调刷新位置点详细信息
     */
    handleSubmit = (record) => {
        const {inputValue} = this.state
        const { dispatch } = this.props;
        this.clearLushuExceptionList()
        dispatch({
            type: 'vehicle/fetchObdLocation',
            payload: {
                iccid: inputValue.imei,
                ...record
            },
            callback: res => {
                if (res.code === '000000') {
                    if (res.locationList.length) {
                        this.mounthPoint(res.locationList);
                    } else {
                        message.warning('未找到轨迹！');
                    }
                } else {
                    message.warning(res.msg);
                }
            },
        });
        // const { pointClick, dispatch } = this.props;
        // if (pointClick && Object.keys(pointClick).length) {
        //     dispatch({
        //         type: 'vehicle/fetchObdLocation',
        //         payload: {
        //             iccid: pointClick.imei,
        //             ...record
        //         },
        //         callback: res => {
        //             if (res.code === '000000') {
        //                 if (res.locationList.length) {
        //                     this.mounthPoint(res.locationList);
        //                 } else {
        //                     message.warning('未找到轨迹！');
        //                 }
        //             } else {
        //                 message.warning(res.msg);
        //             }
        //         },
        //     });
        // } else {
        //     message.warning('暂无数据！！');
        // }
    };
    mounthPoint = locationList => {
        const path = {
            points: [],
            queryProp: [],
        };
        for (var i = 0; i < locationList.length; i++) {
            if (locationList[i].fix !== 0) {
                var wgs84togcj02 = coordtransform.wgs84togcj02(locationList[i].lng, locationList[i].lat);
                var gcj02tobd09 = coordtransform.gcj02tobd09(wgs84togcj02[0], wgs84togcj02[1]);
                var points = new BMap.Point(gcj02tobd09[0], gcj02tobd09[1]);
                var data = {
                    lng: gcj02tobd09[0], //"经度"
                    lat: gcj02tobd09[1], //"纬度"
                    att: locationList[i].att, //"海拔高度"
                    spd: locationList[i].spd, //"gps测速"
                    head: locationList[i].head, //"角度"
                    rptutc: locationList[i].rptutc, //上报时间"
                };

                path.queryProp.push(data);
                path.points.push(points);
            }
        }
        this.setState({
            loopData: path.queryProp,
            loopPath: path.points,
        });
        this.createMap(path.points);
    };
    createMap = pathPoints => {
        if (!pathPoints.length) {
            message.warning('没有可用的点！！');
            return;
        }
        const {map} = this.state       
        // 画线
        map.addOverlay(new BMap.Polyline(pathPoints, { strokeColor: '#111' }));
        map.setViewport(pathPoints);
        this.lushuPlay();
    };
    lushuPlay = () => {
        const { lushu, loopData, loopPath, map } = this.state;
        if (lushu && Object.keys(lushu).length) {
            this.resetLushu()
        }
        var _this = this;
        var lushuBack = new BMapLib_lushu.LuShu(map, loopPath, {
            defaultContent: "",
            autoView: true,//是否开启自动视野调整，如果开启那么路书在运动过程中会根据视野自动调整
            icon: new BMap.Icon(tree_icon.direction, new BMap.Size(26, 26), { anchor: new BMap.Size(13, 13) }),
            speed: 500,
            enableRotation: true,//是否设置marker随着道路的走向进行旋转
            landmarkPois: [
                { lng: 116.368287, lat: 39.951169, html: '高速公路收费<div><img src="http://map.baidu.com/img/logo-map.gif"/></div>', pauseTime: 3 }
            ],
            callback: function (num) {
                _this.dataLoopFn(loopData[num], num); //刷新位置详情
            }
        });
        this.setState(prevState => ({ lushu: lushuBack }));
    };
    lushuStart = () => {
        const { lushu, map, loopPath, localNo } = this.state;
        if(lushu && Object.keys(lushu).length){
            map.centerAndZoom(loopPath[localNo], 15);
            lushu.start();
            this.setState({
                lushuStatus:1
            })
        }
        return
    }
    lushuPause = () => {
        const { lushu } = this.state
        if (lushu && Object.keys(lushu).length) {
            lushu.pause()
            this.setState({
                lushuStatus: 2
            })
        }
        return
    }
    lushuStop = () => {
        const { lushu } = this.state
        if (lushu && Object.keys(lushu).length) {
            lushu.stop()
            this.setState({
                lushuStatus: 3
            })
        }
        return
    }
    dataLoopFn = (data, index) => {        
        this.setState((prevState, props) => {
            // prevState.loopDataLocal.unshift(data)
            return { 
                loopDataLocal: data,
                localNo: index
            };
        });
    };
    handleSpeed = value => {
        const { lushu } = this.state
        if (lushu && Object.keys(lushu).length) {
            switch (value) {
                case 1: //快放x2
                    lushu.pause()
                    lushu._opts.speed = 2000
                    lushu.start()
                    break;
                case 2: //快放x1.5
                    lushu.pause()
                    lushu._opts.speed = 1000
                    lushu.start()
                    break;
                case 4: //慢放x1.5
                    lushu.pause()
                    lushu._opts.speed = 350
                    lushu.start()
                    break;
                case 5: //慢放x2
                    lushu.pause()
                    lushu._opts.speed = 150
                    lushu.start()
                    break;
                default:
                    //正常
                    lushu.pause()
                    lushu._opts.speed = 500
                    lushu.start()
                    break;
            }
        }
        return
    };
    resetLushu = flages => {
        // ***1：初始化，2：切换速度，3：回放完成
        this.lushuStop()
        this.setState((prevState, props) => {
            return {
                loopDataLocal: [],
                lushu: {}
            };
        });
    };
    // ***********lushu End--轨迹结束***********

    /**
     * 轨迹回放 查询-toggle 按钮
     * lushuToggle --- 查询时间-控制面板
     * toggleInputFn --- 轨迹回放按钮
     */
    lushuToggle = ()=>{
        const { toggleIcon} = this.state
        this.setState({
            toggleIcon: !toggleIcon
        })
    }
    toggleInputFn = ()=>{
        const { toggleInput } = this.state
        if (toggleInput){
            this.clearLushuExceptionList()
            this.setState({
                toggleIcon: false,
                drawerVisible: false,
            })
        }
        this.setState({
            toggleInput: !toggleInput
        })
    }
    showlushuStatus(){
        const {lushuStatus} = this.state
        switch (lushuStatus) {
            case 1:
                return <p><Icon type="pause-circle" style={{ marginRight: "5px", color:"#1890FF" }} /> 轨迹播放中...</p>
                break;
            case 2:
                return <p><Icon type="play-circle" style={{ marginRight: "5px", color:"#52C41A" }} />轨迹已暂停...</p>
                break;
            case 3:
                return <p><Icon type="poweroff" style={{ marginRight: "5px", color:"#F5222D"}}/>轨迹已停止...</p>
                break;        
            default:
                return null
                break;
        }
    }
    /**
     * 清除轨迹保留查询列表
     */
    clearLushuExceptionList(){
        const { lushu, map } = this.state
        if (lushu && Object.keys(lushu).length) {
            this.lushuStop()
            var allOverlay = map.getOverlays();
            for (var i = 0; i < allOverlay.length; i++) {
                if (allOverlay[i].toString() == "[object Polyline]" || allOverlay[i].toString() == "[object Overlay]" || !allOverlay[i].imei) {
                    map.removeOverlay(allOverlay[i]);
                }
            }
            this.setState({
                loopDataLocal: [], //当前回放的定位详情
                loopData: [], //轨迹定位详情数组
                loopPath: [], //轨迹点数组
                localNo: 0,//当前的点
                lushu: {},
            })
        }
    }
    /**
     * 抽屉方法
     */
    showDrawer = () => {
        const { drawerVisible}  = this.state
        this.setState({
            drawerVisible: !drawerVisible,
        });
    };
    closeDrawer = ()=>{
        this.setState({
            drawerVisible: false,
        });
    }
    render() {
        const { treeData, toggleIcon, inputValue, toggleInput, loopDataLocal, drawerVisible}= this.state;
        const menu = (
            <Menu onClick={this.handleMenuClick}>
                <Menu.Item key="1"><i className={styles.toolkit_icon +' '+ styles.measure}></i>测距</Menu.Item>
            </Menu>
        );
        return (
            <PageHeaderWrapper auto="full">
                {/* <Card bordered={false}> */}
                    <Layout>
                        <Sider width={250} style={{ background: '#fff', height: "85vh", overflowY:"scroll" }}>
                            {treeData.length ? 
                                <Tree
                                    loadData={this.onLoadData}
                                    checkable
                                    showIcon={true}
                                    defaultExpandedKeys={['0']}
                                    onRightClick={this.rightClick}
                                    onSelect={this.onSelect}
                                    onCheck={this.onCheck}
                                >
                                    <TreeNode title={'监控中心'} key="0" icon={<img src={tree_icon.all} />}>
                                        {this.renderTreeNodes(treeData)}
                                    </TreeNode>
                                </Tree>
                            : <Icon type="loading" />}
                        </Sider>
                        <Content style={{marginTop:"-55px"}}>
                            <div className={styles.toolkit_warp}>
                                <div className={styles.toolkit_right}>
                                    <div className={styles.toolkit_drop}>
                                        <div className={styles.toolkit_list} onClick={this.toggleInputFn}>
                                            <span className={styles.toolkit_icon +' '+ styles.toolkit_icon_box}></span>
                                            <span className={styles.toolkit_text}>轨迹回放</span>
                                        </div>
                                        <Divider type="vertical" />
                                        <div className={styles.toolkit_list}>
                                            <span className={styles.toolkit_icon +' '+ styles.toolkit_icon_box}></span>
                                            <span className={styles.toolkit_text}>
                                                <Dropdown overlay={menu} trigger={['click']}>
                                                    <span>工具箱 <Icon type="down" style={{ verticalAlign: "initial"}}/></span>
                                                </Dropdown>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                                <div id="Bmap_cctv" style={{height:"calc(100% - 55px)"}}/>  
                                {
                                    toggleInput ?
                                        <Fragment>
                                            {drawerVisible?
                                                <div className={styles.markDynamic}>
                                                    <p>车牌号：{inputValue.plateNo ? inputValue.plateNo:"未知"}</p>
                                                    <p>时间：{loopDataLocal.rptutc?loopDataLocal.rptutc:"未知"}</p>
                                                    <p>速度：{loopDataLocal.spd ? parseFloat(loopDataLocal.spd).toFixed(2)+"km/h":"未知"}</p>
                                                    <p>海拔：{loopDataLocal.att ? parseFloat(loopDataLocal.att).toFixed(2)+"米":"未知"}</p>
                                                    <p>航向：{loopDataLocal.head ? parseFloat(loopDataLocal.head).toFixed(2) +"°":"未知" }</p>
                                                    <p>坐标：{loopDataLocal.lng ? loopDataLocal.lng +","+ loopDataLocal.lat:"未知"}</p>
                                                </div>
                                            :null}
                                            <div className={styles.toolkit_lushu}>
                                                <Row type="flex" justify="space-around" align="middle">
                                                    <Col span={20}>
                                                        <Input
                                                            disabled placeholder="右键选择左侧车辆编号"
                                                            value={inputValue.plateNo}
                                                            style={{ border: "0px", outline: "none", cursor: "pointer", boxShadow: "none" }}
                                                        ></Input>
                                                    </Col>
                                                    <Col span={4} onClick={this.lushuToggle} style={{ cursor: "pointer", textAlign: "right" }}>
                                                        {
                                                            toggleIcon ? <Icon type="up" /> : <Icon type="down" />
                                                        }
                                                    </Col>
                                                </Row>   
                                            </div>
                                            <div className={toggleIcon ? styles.toolkit_lushu_toggle + ' ' + styles.in : styles.toolkit_lushu_toggle }>
                                                <div style={{marginTop:"15px"}}>
                                                    <DatePickerTime handleTable={this.handleSubmit} title="查询" />
                                                </div>                                        
                                                <Divider  />
                                                <div>
                                                    <Button type="primary" size="small" className={styles.operateBtn} onClick={this.lushuStart}>播放</Button>
                                                    <Button type="default" size="small" className={styles.operateBtn} onClick={this.lushuPause}>暂停</Button>
                                                    <Button type="danger" size="small" className={styles.operateBtn} onClick={this.lushuStop}>停止</Button>
                                                    <div style={{height:"15px"}}></div>
                                                    <Select defaultValue={3} style={{ width: 120 }} className={styles.operateBtn} onChange={this.handleSpeed} size="small">
                                                        <Select.Option value={1}>快速播放x2</Select.Option>
                                                        <Select.Option value={2}>快速播放x1.5</Select.Option>
                                                        <Select.Option value={3}>正常播放</Select.Option>
                                                        <Select.Option value={4}>慢速播放x1.5</Select.Option>
                                                        <Select.Option value={5}>慢速播放x2</Select.Option>
                                                    </Select>
                                                    <Button type="primary" size="small" className={styles.operateBtn} onClick={this.showDrawer}>显示行驶信息</Button>
                                                    <Tooltip title="打开轨迹点展示，会耗费浏览器性能！">
                                                        <Icon type="question-circle-o" />
                                                    </Tooltip>
                                                    <div style={{ height: "15px" }}></div>
                                                    {
                                                        this.showlushuStatus()
                                                    }
                                                    
                                                </div>
                                            </div>
                                        </Fragment>
                                    :null
                                }                              
                            </div>
                        </Content>
                    </Layout>
                    {/* <Drawer
                        title="轨迹点列表"
                        placement='top'
                        closable={false}
                        onClose={this.closeDrawer}
                        visible={drawerVisible}
                    >
                        <div style={{height:"152px",overflowY:"scroll"}}>
                            {
                                loopDataLocal.map((item,index)=>{
                                    return <p key={index}>
                                        接收时间：{item.rptutc}
                                        gps测速：{item.spd}km/h
                                        海拔高度：{item.att}米
                                        角度：{item.head}°
                                        位置：经{item.lng} &nbsp; 纬{item.lat}
                                    </p>
                                })
                            }
                        </div>
                    </Drawer> */}
                {/* </Card> */}
            </PageHeaderWrapper>
        );
    }
}

export default TableList;
